<template>
  <div class="index">
    <NavBar/>
    <div class="container">
      <div class="item recharge">
        <div class="recharge-h">
          <span class="ftz16">充值中心</span>
        </div>
        <div class="recharge-c">
          <div class="recharge-c-h">
            <span class="line"></span>
            <span class="ftz16">账户余额</span>
          </div>
          <div class="balance">
            <strong class="ftz30">{{walletData.income}}</strong>中亿币
            <span class="tip">1中亿币=0.1元</span>
          </div>
          <div class="recharge-c-h">
            <span class="line"></span>
            <span class="ftz16">请选择充值数量</span>
          </div>
          <ul class="recharge-num" id="payNum">
            <li class="recharge-num-i" @click="changeNum(100, '1')" :class="{'on': curItem === '1'}">
              <span class="icon-coin"></span>
              <i class="ftz32">100</i>
              <div class="tip">
                需要￥
                <span num>10.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(500, '2')" :class="{'on': curItem === '2'}">
              <span class="icon-coin"></span>
              <i class="ftz32">500</i>
              <div class="tip">
                需要￥
                <span num>50.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(1000, '3')" :class="{'on': curItem === '3'}">
              <span class="icon-coin"></span>
              <i class="ftz32">1000</i>
              <div class="tip">
                需要￥
                <span num>100.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(2000, '4')" :class="{'on': curItem === '4'}">
              <span class="icon-coin"></span>
              <i class="ftz32">2000</i>
              <div class="tip">
                需要￥
                <span num>200.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(5000, '5')" :class="{'on': curItem === '5'}">
              <span class="icon-coin"></span>
              <i class="ftz32">5000</i>
              <div class="tip">
                需要￥
                <span num>500.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(10000, '6')" :class="{'on': curItem === '6'}">
              <span class="icon-coin"></span>
              <i class="ftz32">10000</i>
              <div class="tip">
                需要￥
                <span num>1000.00</span>
              </div>
            </li>
            <li class="recharge-num-i" @click="changeNum(20000, '7')" :class="{'on': curItem === '7'}">
              <span class="icon-coin"></span>
              <i class="ftz32">20000</i>
              <div class="tip">
                需要￥
                <span num>2000.00</span>
              </div>
            </li>
            <li class="recharge-num-i"  @click="changeNum(100, '8')" :class="{'on': curItem === '8'}">
              <span class="ftz16">自定义</span>
              <input type="text" v-model="money">
              <div class="tip">
                需要￥
                <span num>{{money/10}}</span>
              </div>
            </li>
          </ul>
          <div class="recharge-c-h">
            <span class="line"></span>
            <span class="ftz16">请选择支付方式</span>
          </div>
          <div class="pay-c">
            <div class="pay-way">
              <input type="radio" name="pay" checked>
              <span class="zfb"></span>
              <!-- <input type="radio" name="pay">
              <span class="wx"></span> -->
            </div>
            <div class="tip">
              <input type="checkbox" checked="" id="agree">
              <span>我已仔细阅读并接受
                <a href="javascript:void(0)" onclick="use_agree()">《中亿理投师中亿币使用服务协议》</a>
              </span>
              <span class="fr pay-btn">
                应付金额：
                <i class="ftz20" id="coin">￥{{fmoney(money/10, 2)}}</i>
                <button id="pay_sub" @click="updateRecharge">立即支付</button>
              </span>
            </div>
          </div>
          <div class="prompt">
            <span class="ftz16">温馨提示：</span>
            <ul>
              <li>充值成功后，余额可能存在延迟现象，请以支付宝的支付提示为准，一般1到5分钟内到账，如有问题，请咨询客服；</li>
              <li>充值金额必须是1-99999的整数；</li>
              <li>暂时只支持使用支付宝支付和微信支付方式充值；</li>
              <li>充值完成后，您可以进入账户总览页面查看是否充值成功及充值记录。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import * as api from '@/service/api'
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
export default {
  components: {
    NavBar,
    Footer
  },
  data () {
    return {
      loading: false,
      curItem: '1',
      walletData: {},
      money: 100
    }
  },
  created () {
    this.init()
    this.getWallet()
  },
  methods: {
    async updateRecharge () {
      if (!/^[0-9]*[1-9][0-9]*$/.test(this.money / 10)) {
        window.layer.msg('充值金额必须是1-99999的整数')
        return false
      }
      if ($('#agree').is(':checked')) {
        let res = await api.updateRecharge({
          amount: this.money / 10,
          payType: 'alipay'
        })
        let str = res.data
        var newwindow = window.open('', '_self', '')
        newwindow.document.write(str)
      } else {
        window.layer.msg('请先阅读并同意《中亿理投师中亿币使用服务协议》')
      }
    },
    async getWallet () {
      this.loading = true
      try {
        let res = await api.getWallet()
        this.walletData = res.data
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    fmoney (s, n) {
      /*
       * 参数说明：
       * s：要格式化的数字
       * n：保留几位小数 fmoney(12, 2) // 12.00
       * */
      n = n > 0 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      let l = s.split('.')[0].split('').reverse()
      let r = s.split('.')[1]
      let t = ''
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')
      }
      return t.split('').reverse().join('') + '.' + r
    },
    changeNum (val, index) {
      this.money = val
      this.curItem = index
    },
    init () {
      $(function () {
        // 同意协议
        $('#agree').click(function () {
          if ($(this).is(':checked')) {
            $('#pay_sub').removeClass('no')
          } else {
            $('#pay_sub').addClass('no')
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/recharge";
</style>
